<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改小说章节内容</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css"
          media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>修改小说章节内容</legend>
    </fieldset>



    <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="小说书名">
            <el-select v-model="form.novelId" placeholder="请选择">
                <el-option
                        v-for="item in novel"
                        :key="item.novelId"
                        :label="item.title"
                        :value="item.novelId">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="章节标题"  style="width: 50%;">
            <el-input v-model="form.chapterTitle"></el-input>
        </el-form-item>


        <el-form-item label="章节内容"  style="width: 80%; ">
            <el-input type="textarea" v-model="form.content"  :rows="10" ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即更新</el-button>

        </el-form-item>
    </el-form>

</div>

<!-- 引入 Vue.js 和 Element UI 的脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
<script>

    var v = new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    novelId: '',
                    chapterTitle: '',
                    content: '',
                    count: '',


                },
                novel: [],
                chapter: {
                    chapterId: '',
                },
            }

        },
        methods: {
            onSubmit() {
                this.wordCount();
                axios.post('chapter/update',this.form).then(res => {
                    if(res.data == 1){
                        alert('修改成功');
                    }

                });
            },
            wordCount() {
                // 使用正则表达式匹配单词数（这里简单地根据空格切分）
                const reg = /[\u4e00-\u9fa5]/g;
                if (this.form.content.trim() === '') {
                    this.form.count = 0;
                } else {
                    const matches = this.form.content.trim().match(reg);
                    if(matches == null){
                        this.form.count = 0;
                    }
                    else {
                        this.form.count = matches.length;
                    }
                }
            },

        },
        mounted() {
            axios.get('novel/select').then(res => {
                this.novel = res.data;

            });

            // 获取 URL 中的参数值（以 # 号分隔）
            let hashValue = window.location.hash;

            // 去掉 # 号，只保留值部分
            this.chapter.chapterId  = hashValue.substring(1);

            // 根据 novelId 获取章节内容
            axios.post('chapter/selectBychapterId',this.chapter).then(res => {
                this.form = res.data;

            });


        }

    });


</script>
</body>
</html>
